import { NavLink } from "react-router-dom";
import Header from "../../components/Header";
import Image from "../../components/News/Image";
import News_btm from "../../components/News/News_btm";
import Tag from "../../components/News/Tag";
import Title from "../../components/News/Title";
import Url from "../../components/News/Url";
import PageNav from '../../components/PageNav'
import axios from "axios";

import React, { Component } from "react";
class View extends Component {
	constructor(props) {
		super(props);
		this.state = {
			newsList: [],
			topList: [],
			setPageCfg: {
				currentPage: 1,
				totalPage: 5,
			},
		};
		this.getNewsFn = this.getNewsFn.bind(this);
	}
	getNewsFn(pageNumber = 1) {
		axios
			.get("/api/feeds", {
				params: {
					page: pageNumber,
				},
			})
			.then((res) => {
				// console.log(res.data);
				const { newsList } = this.state;
				this.setState({
					newsList: res.data.data.feeds,
					setPageCfg: {
						currentPage: pageNumber,
						totalPage: Math.ceil(res.data.data.count / 10),
					},
				});
				// console.log(newsList);
			});
	}
	getTopFn(pageNumber = 1) {
		axios
			.get("/api//top10/h24", {
				params: {
					page: pageNumber,
				},
			})
			.then((res) => {
				console.log(res.data.data.feeds);
				const { topList } = this.state;
				this.setState({
					topList: res.data.data.feeds,
				});
				// console.log(topList);
			});
	}
	componentDidMount() {
		this.getNewsFn(1);
		this.getTopFn(1);
	}
	newsListFn(newsList) {
		return (
			newsList.length !== 0 &&
			newsList.map((item, index) => {
				// console.log(item);
				return (
					<div className='news flex' key={item.id}>
						<Image img={item.imgUrl} />
						<div className='news_con'>
							<Tag tag={item.topicName} />
							<Title title={item.title} />
							<Url url={item.domain} />
							<News_btm heat='123' comment='45' like='56' share='7' />
						</div>
					</div>
				);
			})
		);
	}
	topListFn(topList) {
		return (
			topList.length !== 0 &&
			topList.map((item, index) => {
				// console.log(item);
				return (
					<div className='rank_pro flex' key={item.id}>
						<Image img={item.imgUrl} />
						<p>{item.title}</p>
					</div>
				);
			})
		);
	}
	render() {
		let { newsList, setPageCfg, topList } = this.state;
		console.log(newsList);
		console.log(topList);
		return (
			<div className='app'>
				<Header />
				<div className='content flex'>
					<div className='left'>{this.newsListFn(newsList)}</div>
					<div className='right'>
						<div className='ranking'>
							<div className='rank_title'>最热榜 TOP10</div>
							<div className='rank_content'>
								<div className='rank_time flex'>
									<div className='rank_24h'>24小时</div>
									<div className='rank_3day'>3天</div>
									<div className='rank_week'>一周</div>
								</div>
								<div className='rank_con'>
									{this.topListFn(topList)}
								</div>
							</div>
						</div>
						<div className=''></div>
						<div className=''></div>
					</div>
				</div>
				{newsList.length !== 0 ? (
					<PageNav
						onChange={this.getFn}
						defaultCurrent={setPageCfg.currentPage}
						pageUrl='test1'
						total={setPageCfg.totalPage}
					/>
				) : (
					""
				)}
			</div>
		);
	}
}
export default View;
